<template>
	<view class="">
		<view class="reg-main">
			<view class="xingming" v-show="actId == 0">
				<text>id：</text>
				<input value="" v-model="actId" disabled="true">
			</view>

			<view class="xingming">
				<text>活动名称：</text>
				<input value="" v-model="actName" disabled="true">
			</view>

			<view class="xingming" v-show="state == 0">
				<text>state：</text>
				<input value="" v-model="state" disabled="true">
			</view>

			<view class="xingming" v-show="signTime == 0">
				<text>报名时间：</text>
				<input value="" v-model="signTime" disabled="true">
				<!-- <input value="" v-model="signTime"> -->
			</view>

			<view class="xingming">
				<text>姓名：</text>
				<input value="" v-model="memberName" disabled="true">
			</view>

			<view class="xingming">
				<text>电话号码：</text>
				<input value="" v-model="phone" disabled="true">
			</view>

			<view class="xingming">
				<text>身份证：</text>
				<input value="" v-model="idCard" disabled="true">
			</view>

			<view class="xingming" v-if="this.gender == null">
				<text>性别：</text>
				<input value="" v-model="gender" disabled="true">
			</view>

			<view class="xingming">
				<text>性别：</text>
				<input value="" v-model="genderText" disabled="true">
			</view>

			<view class="xingming">
				<text>房间号：</text>
				<input value="" v-model="uniqueCode" disabled="true">
			</view>
		</view>
		<button class="sub_button" @click="sbu()">确认报名</button>
	</view>
</template>

<script>
	// import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	import getDateTime from '@/static/js/getDateTime.js';
	export default {
		data() {
			return {
				signTime: '',
				gender: 0
			}
		},

		onLoad(option) {
			this.userName()
			// this.getRegistrationList()
			this.actId = option.id
			this.actName = option.actName
			this.state = option.state

			var timeStr = getDateTime.dateTimeStr('y-m-d h:i:s'); // y:年 m:月 d:日 h:时 i:分 s:秒 中间的分割符号可更改
			this.signTime = timeStr
		},

		methods: {

			sbu() {
				if (this.actId == null) {
					uni.showToast({
						title: "报名活动不能为空",
						icon: "none",
					});
				} else {
					uni.showModal({
						content: '您确定要报名此活动吗',
						success: function(res) {

							if (res.confirm) {
								this.getregistration()
								uni.showToast({
									title: "报名成功",
									icon: "none",
									duration: 1000
								});
								setTimeout(function() {
									uni.navigateBack({
										url: "/pages/registration/index",
									})
								}, 1000)
							} else if (res.cancel) {
								return;
							}
						}.bind(this)
					})
				}
			},

			userName() {
				this.memberId = uni.getStorageSync('id')
				this.memberName = uni.getStorageSync('memberName')
				this.uniqueCode = uni.getStorageSync('uniqueCode')
				this.phone = uni.getStorageSync("HC_name")
				this.idCard = uni.getStorageSync("idCard")
				this.gender = uni.getStorageSync("gender")
				this.genderText = uni.getStorageSync("genderText")
			},

			async getregistration() {
				const res = await this
					.$myRequest({
						url: `/api-operate/saveSign/${this.actId}`,
						method: "post",
						data: [{
							actId: this.actId,
							id: this.id,
							token: this.token,
							actName: this.actName,
							signTime: this.signTime,
							idCard: this.idCard,
							phone: this.phone,
							memberId: this.memberId,
							memberName: this.memberName,
							gender: this.gender,
							genderText: this.genderText,
							uniqueCode: this.uniqueCode
						}],
					})
			},
		}
	}
</script>

<style lang="scss">
	.reg-main {
		box-shadow: 0rpx 0rpx 0rpx 8rpx #ebeff6;
	}

	.xingming {
		width: 100%;
		height: 98rpx;
		display: flex;
		line-height: 98rpx;
		border-bottom: 2rpx solid #ebeff6;
		background-color: #FFFFFF;
		// margin-top: 24rpx;

		text {
			width: 198rpx;
			margin-left: 15%;
			text-align: left;
			// border: 1rpx solid;
		}

		input {
			width: 386rpx;
			height: 98rpx;
			text-align: left;
			background-color: #FFFFFF;
			// border: 1rpx solid;
		}
	}

	.Combination {
		display: flex;
		// margin: 24rpx;
		align-items: center;
		justify-content: center;

		image {
			width: 565rpx;
			height: 565rpx;
			margin-top: 240rpx;
		}
	}
</style>
